<template>
    <div id="aaa" class="col-md-12">
        <div class="top">
            <ul>
                <li><a href="javascript:;" @click='tabToggle(tab01Text);'>{{tab01Text}}</a></li>
                <li><a href="javascript:;" @click='tabToggle(tab02Text);'>{{tab02Text}}</a></li>
                <li><a href="javascript:;" @click='tabToggle(tab03Text);'>{{tab03Text}}</a></li>
            </ul>
        </div>
        <div class="bottom">
            <!--<components :is='currentView'></components>-->
            <div v-show="tab1"><p>This is tab01</p></div>
            <div v-show="tab2"><p>This is tab02</p></div>
            <div v-show="tab3"><p>This is tab03</p></div>
        </div>
       <!-- <Tabs value="name1">
            <TabPane label="标签一" name="name1">标签一的内容</TabPane>
            <TabPane label="标签二" name="name2">标签二的内容</TabPane>
            <TabPane label="标签三" name="name3">标签三的内容</TabPane>
        </Tabs>-->
    </div>
</template>

<script>
    export default {
        name: "tab-com",
        data(){
            return{
                tab01Text:'tab01',
                tab02Text:'tab02',
                tab03Text:'tab03',
                tab1:true,
                tab2:false,
                tab3:false
            }
        },
        methods:{
            tabToggle(tabText){
               if(tabText=='tab03'){
                   this.tab3=true;
                   this.tab2=false;
                   this.tab1=false;
               }else if(tabText == 'tab02'){
                   this.tab2=true
                   this.tab3=false;
                   this.tab1=false;
                }else{
                   this.tab2=false;
                   this.tab3=false;
                   this.tab1=true;
                }
            }
        }
    }

</script>

<style scoped>
    #aaa{
        position: relative;
        width: 500px;
        height: 300px;
        margin: 0 auto;
        background-color: #ddd;
    }
    .top{
        height: 50px;line-height: 50px;width: 100%;background-color: #999;
    }
    .top ul li{display: inline-block;margin:0 10px;}
    .top ul li a{text-decoration: none;color: white;}
    .bottom{

    }
</style>
